<template>
  <div>
    <div class="reviews" v-for="(v,key) in reviews" :key="key">
      <img :src="v.userHeadIcon" alt="">
      <p>{{v.userName}}</p>
      <!--右侧点赞功能-->
      <div class="fabulous">
        <!-- <span class="animate">+1</span>-->
        <div v-show ="true" ref="zan">
          <img src="../../../assets/helpServerIcon/fabulous.png" alt="" @click="zan(key)">
          <p>赞</p>
        </div>
        <div v-show ="false" ref="noZan">
          <img src="../../../assets/helpServerIcon/red_fabulous.png" alt="" @click="deleteZan(key)">
          <p>{{v.fabulousNumber}}</p>
        </div>
      </div>
      <p class="commentContent">{{v.comment_content}}</p>
      <div class="commentTime">{{v.comment_time}} <span>回复</span></div>
      <div class="reply">
        <img :src="v.userHeadIcon" alt="" class="headIcon">
        <span style="color:#666666;font-size:12px;margin-top:5vw;float:left;">{{v.replyName}}</span><br>
        <p class="replyContent" style="margin-top:5vw;">{{v.replyContent}}</p>
        <div class="commentTime" style="padding-left:2.5vw;">{{v.comment_time}} <span>回复</span></div>
        <p style="color:#FF4C50;">查看全部回复</p> <img src="../../../assets/helpServerIcon/ic.png" alt="">

      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "comment",
      props:['reviews'],
      methods:{
        zan(key){
          this.$refs.zan[key].style.display = "none";
          this.$refs.noZan[key].style.display = "block";
        },
        deleteZan(key){
          this.$refs.zan[key].style.display = "block";
          this.$refs.noZan[key].style.display = "none";
        },
        close:function(){
          $("#tabbar").hide();
        }
      }
    }
</script>

<style scoped>
  .reviews{
    margin:0px auto;
    width:92vw;
    padding-top:2.3vw;

  }
  .reviews img{
    width:8vw;
    height:8vw;
    float:left;
  }
  .reviews p{
    font-size:12px;
    float:left;
    margin-left:2vw;
    margin-top:1.6vw;
    color:#666666;
  }
  .fabulous{
    float:right;

  }
  .fabulous img{
    width:4vw;
    height:4.3vw;
    margin-top:2.3vw;
  }
  .fabulous p{
    font-size:15px;
  }
  .commentContent{
    width:81.87vw;
    float:right;
  }
  .commentTime{
    width:79.47vw;
    float:right;
    font-size:12px;
    margin-right:2.9vw;
    margin-top:1vw;
    margin-bottom:1vw;
    color:#666666;
  }
  .commentTime span{
    float:right;
  }
  .reply{
    width:81.87vw;
    background:#f5f5f5;
    float:right;
    font-size:12px;
    color:#666666;
  }
  .reply .headIcon{
    width:8vw;
    height:8vw;
    float:left;
  }
  .reply img{
    height:2.13vw;
    width:1.33vw;
    margin-top: 3vw;
    margin-left: 1vw;
  }
</style>
